import {memo} from 'react'
import styled from 'styled-components'

const SidebarWrapper = styled.div`
  width: 186px;
    /* height: calc(100vh - ${(props) => props.headerHeight}); */
  height: calc(100vh - ${(props) => props.headerHeight});
  overflow: scroll;
  background: ${(props) => props.backgroundColor};
  border: none;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  @media screen and (max-width: 760px) {
    width: 0px;
  }
`

export default memo(function AppSidebar({children}) {
    console.log("AppSidebar render")
    return <SidebarWrapper>{children}</SidebarWrapper>
})
